<template>
    <div class="page-main">
        <h1 class="page-title">
            {{ name }}
        </h1>

        <router-view v-slot="{ Component }">
            <v-fade-transition>
                <component :is="Component" />
            </v-fade-transition>
        </router-view>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const name = computed(() => {
    const name = router.currentRoute.value.params.name ?? "我的收藏";

    // 如果 name 是 string[]
    // 只取第一个元素
    if (Array.isArray(name)) {
        if (name.length === 0) {
            return "我的收藏";
        }
        return name[0];
    }

    return name;
});
</script>
